<template>
	<div>
		<!-- 头部导航区域 -->
		<el-tabs v-model="tabName" @tab-click="checkTab">
			<el-tab-pane :label="item.name" :name="item.type" v-for="(item,index) in tabs" :key="index"></el-tab-pane>
		</el-tabs>
		<!-- 头部form表单区域 -->
		<div class="headForm">
			<el-form :inline="true">
				<el-form-item>
					<el-button type="success" size="mini">发布商品</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="danger" size="mini">批量删除</el-button>
				</el-form-item>
				<el-form-item>
					<el-button size="mini">
						<span style="color: teal">上架</span>
					</el-button>
				</el-form-item>
				<el-form-item>
					<el-button size="mini">
						<span style="color: teal">下架</span>
					</el-button>
				</el-form-item>
			</el-form>
			<el-form :inline="true">
				<el-form-item>
					<el-input placeholder="手机号/邮箱/会员昵称" size="mini" v-model="title"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="info" size="mini">搜索</el-button>
				</el-form-item>
				<el-form-item>
					<el-popover placement="bottom" title="高级搜索" trigger="click" style="width: 100%;">
						<el-form :inline="true" style="border-top: 1px solid #ddd;width: 100%;padding-top: 10px;">
							<el-form-item label="搜索内容">
								<el-input placeholder="手机号/邮箱/会员昵称" size="mini" v-model="title"></el-input>
							</el-form-item>
							<el-form-item label="会员等级">
								<el-select v-model="cateId" placeholder="请选择商品分类" size="mini">
									<el-option v-for="item in goodsCate" :key="item.id" :label="item.name" :value="item.id">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item>
								<el-button type="info" size="mini">搜索</el-button>
							</el-form-item>
							<el-form-item>
								<el-button type="success" size="mini" plain>清空筛选条件</el-button>
							</el-form-item>
						</el-form>
						<el-button type="success" slot="reference" size="mini" plain>高级搜索</el-button>
					</el-popover>
				</el-form-item>
			</el-form>
		</div>
		<!-- 商品列表区域 -->
		<el-table :data="goodsList" border>
			<el-table-column type="selection" width="55"></el-table-column>
			<el-table-column label="商品" align="center" width="240px">
				<template slot-scope="scope">
					<div class="users">
						<div>
							<el-image :src="scope.row.cover" style="width: 50px;" />
						</div>
						<div>
							<p>{{scope.row.title}}</p>
							<p>分类: {{scope.row.category.name}}</p>
							<p>时间: {{scope.row.create_time}}</p>
						</div>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="实际销量" prop="sale_count" align="center"></el-table-column>
			<el-table-column label="商品状态" align="center">
				<template slot-scope="scope">
					<el-tag type="success" effect="dark" size="mini" v-show="scope.row.status == 1">上架</el-tag>
					<el-tag type="danger" effect="dark" size="mini" v-show="scope.row.status == 0">仓库</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="审核状态" align="center">通过</el-table-column>
			<el-table-column label="总库存" prop="stock" align="center"></el-table-column>
			<el-table-column label="价格(元)" align="center">
				<template slot-scope="scope">
					<div style="color: red;">￥{{scope.row.min_oprice}}</div>
					<div>￥{{scope.row.min_price}}</div>
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center" width="500px">
				<template>
					<el-button type="text" size="mini">
						<span style="color: teal">基础设置</span>
					</el-button>
					<el-button type="text" size="mini">
						<span style="color: teal">商品规格</span>
					</el-button>
					<el-button type="text" size="mini">
						<span style="color: red">商品属性</span>
					</el-button>
					<el-button type="text" size="mini">
						<span style="color: red">媒体设置</span>
					</el-button>
					<el-button type="text" size="mini">
						<span style="color: teal">商品详情</span>
					</el-button>
					<el-button type="text" size="mini">
						<span style="color: teal">折扣设置</span>
					</el-button>
					<el-button type="text" size="mini">
						<span style="color: red">删除商品</span>
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页器区域 -->
		<el-pagination style="margin-top: 10px;" @size-change="changeSize" @current-change="changePage" :current-page="page"
		 :page-sizes="[5, 10, 15, 20]" :page-size="limit" layout="total, sizes, prev, pager, next, jumper" :total="totals">
		</el-pagination>
	</div>
</template>

<script>
	export default {
		props: [],
		components: {},
		data() {
			return {
				tabs: [{
						name: "全部",
						type: "all"
					},
					{
						name: "审核中",
						type: "checking"
					},
					{
						name: "出售中",
						type: "saling"
					},
					{
						name: "已下架",
						type: "off"
					},
					{
						name: "库存预警",
						type: "min_stock"
					},
					{
						name: "回收站",
						type: "delete"
					},
				],
				tabName: "all",
				page: 1,
				limit: 5,
				starttime: "",
				endtime: "",
				title: "", // 搜索的关键字
				cateId: "",
				totals: 0, // 总条数
				// 保存商品列表的数据
				goodsList: [],
				goodsCate: [],
			};
		},
		created() {

		},
		mounted() {
			// 获取商品列表数据
			this.getGoodsList();
		},
		methods: {
			checkTab(data) {
				console.log(data.name);
				console.log(this.tabName)
				this.getGoodsList();
			},
			// 获取商品列表数据
			getGoodsList() {
				this.$axios.get(`/api/admin/goods/${this.page}&tab=${this.tabName}&limit=${this.limit}`).then(res => {
					console.log(res.data.list)
					this.goodsList = res.data.list;
					// 商品分类
					this.goodsCate = res.data.cates;
					// 计算总条数
					this.totals = res.data.totalCount
				}).catch(error => {
					this.$message.error(error.response.data.msg);
				})
			},
			// 分页的操作
			changeSize(size) {
				this.limit = size;
				this.getGoodsList();
			},
			changePage(page) {
				this.page = page;
				this.getGoodsList();
			}
		},
		computed: {

		},
		watch: {

		}
	};
</script>

<style lang="scss" scoped>
	.headForm {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.users {
		display: flex;
		justify-content: space-between;
		align-items: center;

		p {
			margin: 0px;
			padding: 0px;
		}
	}
</style>
